<template>
  <!-- 店铺详情 -->
  <div class="shop-detail">
    <div class="top-cell">
      <div class="avatar-wrapper">
        <img :src="merchantInfo.head_image" alt="" v-if="merchantInfo.head_image"/>
        <img src="@/assets/image/default-avatar.jpeg" alt="" v-else/>
      </div>
      <div class="top-center">
        <span class="shop-name">{{ merchantInfo.remark }}</span>
      </div>
      <span 
        class="freeze auth-btn" 
        :class="{'dis': isFreeze}"
        @click="freezeAccount">{{ isFreeze ? '解除冻结' : '冻结'}}</span>
      <!-- <p class="logout auth-btn" @click="delAccount">注销</p> -->
    </div>

    <div class="invite-cell">
      <p>当前账号数量：<span class="green-text">{{ shopList.length }}个</span></p>
    </div>

    <div class="shop-list">
      <div 
        class="shop-item" 
        v-for="(shop, shopIndex) in shopList" 
        :key="shopIndex">
        <div class="avatar-wrapper">
          <img :src="shop.head_image" alt="" v-if="shop.head_image"/>
          <img src="@/assets/image/default-avatar.jpeg" alt="" v-else/>
        </div>
        <div class="shop-center">
          <div class="member-name">
            <span class="name">{{ shop.username }}</span>
            <p class="badge" :class="{'is-member': shop.type !== 'merchant'}">{{ shop.identity === 'MERCHANT' ? '商户' : '成员'}}</p>
          </div>
          <p class="member-mobile">手机号：{{ shop.mobile }}</p>
        </div>
        <p class="view" @click="jump('/accountdetail', shop)">查看账号</p>
      </div>
    </div>

    <div class="dialog" v-if="showDialog">
      <p class="mask"></p>
      <div class="dialog-content">
        <img 
          @click="showDialog = false"
          src="@/assets/image/close-dialog.png" 
          alt="" class="close-icon"/>
        <div class="top">
          <img src="@/assets/image/freeze-tip.png" alt=""/>
          <span>提 示</span>
        </div>
        <div class="tip">
          <span v-if="!isFreeze">
            确认要冻结【{{ merchantInfo.remark }}】么？冻结后该旗下所有账号都不会再推送任务，原有宜分发的任务可继续执行。
          </span>
          <span v-else>
            确认要解除冻结【{{ merchantInfo.remark }}】么？
          </span>
        </div>
        <div class="btns">
          <div class="btn sure" @click="freezeSure">确认</div>
          <div class="btn diancuo" @click="showDialog = false">点错了</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listMembers, updateUserStatus, getUserInfo } from '@/api/account'
import { getOssDomain } from '@/api/oss'

export default {
  data () {
    return {
      shopList: [],
      current_page: 1,
      page_size: 20,
      order_by: 'SUM_VIEW',
      loading: false, // 是否正在加载
      showDialog: false,
      isFreeze: false,
      merchantInfo: {}, // 商户详情
      oss_domain: '',
    }
  },
  async mounted () {
    if (!sessionStorage.getItem('oss_domain')) {
      const res = await getOssDomain()
      sessionStorage.setItem('oss_domain', res.domain)
      this.oss_domain = res.domain
    } else {
      this.oss_domain = sessionStorage.getItem('oss_domain')
    }
    getUserInfo({ account_id: this.$route.query.merchant_id}).then(res => {
      if (res.head_image) res.head_image = `${this.oss_domain}/${res.head_image}`
      this.merchantInfo = res
      this.shopList = []
      this.isFreeze = res.status === 'FREEZE'
      this.getMemberList()
    })
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll,true) // 监听页面滚动*/
  },
  methods: {
    freezeSure () {
      updateUserStatus({
        account_id: this.$route.query.merchant_id,
        status: this.isFreeze ? 'AUDIT_PASS' : 'FREEZE'
      }).then(res => {
        console.log('冻结成功')
        this.showDialog = false
        this.isFreeze = !this.isFreeze
      })
    },
    freezeAccount () {
      this.showDialog = true
    },
    delAccount () {
      updateUserStatus({
        account_id: this.$route.query.merchant_id,
        status: 'DELETED'
      }).then(res => {
        console.log('删除成功')
        Toast('注销成功')
        this.$router.go(-1)
      })
    },
    handleScroll () {
      if (this.loading) return
      const diff = 100
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
      if (scrollHeight - scrollTop- windowHeight < diff) {
        console.log('page shopDetail - 到底部啦')
        if (this.shopList.length < this.total) {
          this.current_page += 1
          this.getMemberList()
        }
      }
    },
    getMemberList () {
      this.loading = true
      const { current_page, order_by, page_size } = this
      listMembers({
        merchant_id: this.$route.query.merchant_id,
        current_page, order_by, page_size
      }).then(res => {
        console.log('member list:', res)
        res.list.forEach(item => {
          if (item.head_image) {
            item.head_image = `${this.oss_domain}/${item.head_image}`
          }
        })
        this.shopList = this.shopList.concat(res.list)
        this.total = res.total + 1
        this.loading = false
        this.$forceUpdate()
      })
    },
    jump (path, item) {
      console.log('item:', item)
      const { account_id } = item
      this.$router.push({ path, query: {
        account_id
      }})
    }
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll, true) // 监听页面滚动*/
  }
}
</script>

<style scoped>
.btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn {
  text-align: center;
  width: 27.2vw;
  height: 8.53vw;
  line-height: 8.53vw;
  border-radius: 1.07vw;
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: 500;
  color: #FFFFFF;
}
.sure {
  background: #CCCCCC;
}
.diancuo {
  background: #0A67FF;
}
.tip {
  text-indent: 6vw;
  margin-bottom: 12.27vw;
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: normal;
  color: #333333;
}
.badge.is-member {
  background: #FF7628;
}
.shop-center {
  flex: 1;
}
.member-name {
  display: flex;
  margin-bottom: 1.07vw;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  line-height: 5.87vw;
  color: #3D3D3D;
}
.badge {
  margin-left: 5.33vw;
  width: 10.67vw;
  height: 5.33vw;
  text-align: center;
  line-height: 5.33vw;
  background: #0A67FF;
  border-radius: 2.67vw;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #FFFFFF;
}
.member-mobile {
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  line-height: 5.87vw;
  color: #999999;
}
.avatar-wrapper > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.shop-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 89.6vw;
  height: 19.2vw;
  margin-bottom: 3.2vw;
  box-sizing: border-box;
  padding: 0 2.67vw 0 3.2vw;
  border-radius: 2.13vw;
  background: #FFFFFF;
  border: 0.27vw solid #E6E6E6;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
}
.shop-detail {
  box-sizing: border-box;
  padding: 5.33vw 5.33vw 0;
}
.green-text {
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  color: #00A5A6;
}
.invite-cell {
  display: flex;
  height: 6.93vw;
  margin-bottom: 4.8vw;
  justify-content: space-between;
  align-items: center;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  color: #3D3D3D;
}
.view {
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  color: #0A67FF;
}
.auth-btn {
  padding: 0 4vw;
  height: 7.47vw;
  line-height: 7.47vw;
  text-align: center;
  border-radius: 1.07vw;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #FFFFFF;
}
.auth-btn.dis {
  background: #ccc;
}
.logout {
  background: #EA0000;
}
.freeze {
  /* margin-right: 2.13vw; */
  background: #0A67FF;
}
.top-center {
  flex: 1;
}
.shop-name {
  margin-bottom: 1.07vw;
  font-family: Source Han Sans CN;
  font-size: 16px;
  font-weight: 500;
  color: #3D3D3D;
}
.real-name {
  margin-right: 3.2vw;
  font-family: Source Han Sans CN;
  font-size: 3.73vw;
  font-weight: 500;
  line-height: 5.87vw;
  color: #3D3D3D;
}
.top-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 4vw 0 3.2vw;
  width: 89.6vw;
  height: 21.33vw;
  margin-bottom: 6.4vw;
  background: #FFFFFF;
  border-radius: 2.13vw;
  border: 0.27vw solid #E6E6E6;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
}
.avatar-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12.27vw;
  height: 12.27vw;
  border-radius: 50%;
  margin-right: 2.13vw;
  background: rgba(0, 0, 0, 0.28);
}
.avatar-text {
  font-family: Source Han Sans CN;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0em;
  color: #FFFFFF;
}
.teams-manage {
  box-sizing: border-box;
  padding: 5.33vw 5.33vw 0;
}
.auth-title {
  margin-bottom: 3.2vw;
  font-family: Source Han Sans CN;
  font-size: 3.73vw;
  font-weight: 500;
  color: #FF7628;
}

/* dialog css start */
.confirm-btn {
  text-align: center;
  height: 8.53vw;
  line-height: 8.53vw;
  border-radius: 1.07vw;
  background: linear-gradient(98deg, #006EDD 0%, #009CEC 41%, #00A5A5 100%);
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: 500;
  text-align: center;
  color: #FFFFFF;
}
.dialog {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
}
.dialog-content {
  position: relative;
  box-sizing: border-box;
  padding: 2.67vw 6.13vw 0 4.8vw;
  width: 71.73vw;
  background: #ffffff;
  z-index: 100;
  border-radius: 3.2vw;
  padding-bottom: 4vw;
}
.top {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6.93vw;
  margin-bottom: 3.73vw;
  font-family: 思源黑体;
  font-size: 4.8vw;
  font-weight: bold;
  color: #FF8040;
}
.top > img {
  width: 5.33vw;
  height: 5.33vw;
  margin-right: 2.13vw;
}
.close-icon {
  position: absolute;
  right: 3.2vw;
  top: 3.2vw;
  width: 2.13vw;
  height: 2.13vw;
}
/* dialog css end */
</style>